<template>
  <div class='sousuoTuijian'>
    <div class="title">搜索推荐</div>
    <div class="content">
      <div class='box'>
        <div v-for="(item,index) in tuijian" :key='index' @click = 'openfun(item.url)'>
          <div class="pho" :style="[item.style]"></div>
          <h1>{{item.title}}</h1>
          <div>{{item.txt}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SousuoTuijian',
  data () {
    return {
      tuijian: [
        {
          style: {
            backgroundImage: 'url(/static/Sousuo/tuijian1.jpg)'
          },
          title: '房车旅行',
          txt: '用房子环游世界',
          url: '/fangchelvxing'
        },
        {
          style: {
            backgroundImage: 'url(/static/Sousuo/tuijian2.jpg)'
          },
          title: '牛背山',
          txt: '王者归来',
          url: ''
        },
        {
          style: {
            backgroundImage: 'url(/static/Sousuo/tuijian3.jpg)'
          },
          title: '干塘节',
          txt: '亲子秋日限定活动',
          url: ''
        },
        {
          style: {
            backgroundImage: 'url(/static/Sousuo/tuijian4.jpg)'
          },
          title: '北京环球影城',
          txt: '大片世界 在此成真',
          url: '/huanqiu'
        },
        {
          style: {
            backgroundImage: 'url(/static/Sousuo/tuijian5.png)'
          },
          title: '丽水',
          txt: '云上梯田，古村秘境',
          url: ''
        },
        {
          style: {
            backgroundImage: 'url(/static/Sousuo/tuijian1.jpg)'
          },
          title: '金秋南疆',
          txt: '壮美沙漠胡杨',
          url: ''
        }
      ]
    }
  },
  methods: {
    openfun (ele) {
      this.$router.push({
        path: ele
      })
    }
  }
}
</script>
<style scoped lang='less'>
.sousuoTuijian{
  width: 100%;
  box-sizing: border-box;
  text-align:left;
  padding: 20px 0px 0px 15px;
  .title{
    font-size:16px;
    color:#666;
  }
  .content{
    margin-top:10px;
    overflow-x: scroll;
    border-bottom:1px solid #eee;
    .box{
      width: 920px;
      &>div{
        float:left;
        width: 150px;
        height: 120px;
        .pho{
          width: 140px;
          height: 78px;
          margin: auto;
          background-size:contain;
          background-repeat: no-repeat;
          background-position: center;
          border-radius:5px;
        }
        h1{
          font-size:16px;
          padding-left:7px;
        }
        div:last-child{
          padding-left:6px;
        }
      }
    }
  }
  .content::-webkit-scrollbar{
    width: 0;
  }
}
</style>
